<template>
  <div ref="chart1" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
// 引入接口
import { reqTrendAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any
const legend = ref([])
const title = ref()
const x = ref([])
const y1 = ref([])
const y2 = ref([])
// 发起请求的函数
const init = async () => {
  let res = await reqTrendAPI()
  if (res.code === 200) {
    title.value = res.data.title
    legend.value = res.data.legend
    x.value = res.data.release_time
    y1.value = res.data.total_price
    y2.value = res.data.unit_price
  }
}
onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      backgroundColor: 'rgba(11, 36, 108, 0.8)',
      title: {
        text: title.value + '（单位：万元）',
        textStyle: {
          color: '#fff',
          fontSize: 12,
        },
      },
      legend: {
        data: legend.value, // 绑定图例到系列数据
        top: '0%', // 设置图例的位置（可以使用 'top', 'bottom' 等）
        right: '10%', // 你可以调整水平位置
        textStyle: {
          color: '#fff', // 图例文本颜色
          fontSize: 12, // 图例文本字体大小
        },
      },
      grid: {
        top: 30,
        left: 30,
        right: 30,
        bottom: 30,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
        backgroundColor: 'rgba(9, 24, 48, 0.5)',
        borderColor: 'rgba(75, 253, 238, 0.4)',
        textStyle: {
          color: '#FFF',
        },
      },
      xAxis: {
        type: 'category',
        data: x.value,
        axisLine: {
          lineStyle: {
            color: 'rgba(60,132,163,0.4)', // x轴线颜色
          },
        },
        axisTick: {
          show: false, // 是否显示x轴的刻度
        },
        axisLabel: {
          interval: 0,
          color: '#fff',
          fontSize: 12,
        },
        boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
        backgroundColor: 'rgba(9, 24, 48, 0.5)',
        borderColor: 'rgba(75, 253, 238, 0.4)',
        textStyle: {
          color: '#FFF',
        },
        formatter: function (params) {
          let tooltipContent = params
            .map(function (param) {
              // 在每个数据后加上单位“万元”
              return param.seriesName + ': ' + param.value.toFixed(2) + ' 万元' // 保留两位小数
            })
            .join('<br/>')
          return tooltipContent // 显示带有单位的内容
        },
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#FFF',
          fontSize: 12,
          formatter: function (value) {
            return value + ''
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(60,132,163,0.2)',
          },
        },
      },
      series: [
        {
          name: legend.value[0],
          type: 'line',
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFC100',
              },
              {
                offset: 1,
                color: 'rgba(98,74,0,0)',
              },
            ]),
          },
          lineStyle: {
            width: 2,
            color: '#FFC100',
          },
          // 设置节点样式
          showSymbol: true,
          symbol: 'circle', // 可以选择 circle, diamond, pin 等
          symbolSize: 10, // 节点大小
          itemStyle: {
            color: '#FFC100', // 节点颜色
          },
          data: y1.value,
        },
        {
          name: legend.value[1],
          type: 'line',
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#146fd7',
              },
              {
                offset: 1,
                color: 'rgba(20, 111, 215,0)',
              },
            ]),
          },
          lineStyle: {
            width: 2,
            color: '#146fd7',
          },
          // 设置节点样式
          showSymbol: true,
          symbol: 'circle', // 可以选择 circle, diamond, pin 等
          symbolSize: 10, // 节点大小
          itemStyle: {
            color: '#146fd7',
          },
          data: y2.value,
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style lang="scss" scoped></style>
